<template>
  <div class="head w-full flex justify-between items-center px-4">
    <svg aria-hidden="true" class="w-64 h-8">
      <use xlink:href="#icon-login_logo_text"/>
    </svg>
    <div class="text-lg text-white">
      <span>{{ timeInfo.dateYear }} </span>
      <span class="ml-2">{{ timeInfo.dateDay }} </span>
    </div>
  </div>
</template>

<script setup lang="ts" name="header">
import {formatTime} from '@/utils'
import {onBeforeUnmount, reactive} from 'vue'

// * 时间内容
const timeInfo: any = reactive({
  setInterval: null,
  dateDay: '',
  dateYear: '',
  dateWeek: ''
})
// todo 处理时间监听
const handleTime = () => {
  timeInfo.setInterval = setInterval(() => {
    const date = new Date()
    timeInfo.dateDay = formatTime(date, 'HH: mm: ss')
    timeInfo.dateYear = formatTime(date, 'yyyy-MM-dd')
  }, 1000)
}
handleTime()

//页面销毁关闭定时器
onBeforeUnmount(() => {
  clearInterval(timeInfo.setInterval)
  timeInfo.setInterval = null
})
</script>

<style scoped lang="less">
.head {
  height: 60px;
  background-color: #181c20;
}
</style>
